<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动的本质以及额外标签法</title>
  <style>
    /*
    清除浮动本质
      1. 清除浮动的本质是清除浮动元素造成的影响
      2. 如果父盒子本身有高度,则不需要请求幅度
      3. 清除浮动之后,父级就会根据浮动的子盒子自动监测高度.父级有了高度,就不会影响下面的标准流了
    
    语法:
      选择器 { clear: 属性值; }
    属性值:
      left: 清除左侧浮动
      right: 清除右侧浮动
      both: 清除左右2侧浮动

    一般我们开发只用: clear: both
    
    清除浮动的策略: 闭合策略, 即让浮动元素在父盒子里面随意折腾,不要影响到外面的内容,相当于把浮动的盒子关闭在父元素中

    清除浮动方法
      1. 额外标签法,也称为隔墙法,是W3C推荐的做法
      2. 父级添加 overflow 属性
      3. 父级添加 after 伪元素
      4. 父级添加 双为元素
    */

    /* 
    额外标签法
    在浮动的最后一个盒子后面添加一个标签并设置清除浮动样式, 如 <div style="clear:both"></div>,或者br标签
    注意: 后面添加的标签必须是块级元素

    优点: 通俗易懂,书写方便
    确定: 添加了许多无意义的标签,结构化差
    
     */

    /* 总结
    1.清除浮动的本质是什么?
      清除元素脱离标准流造成的影响
    2.清除浮动策略?
      闭合浮动.只让浮动元素在父盒子内部,不影响其他元素
    3.额外标签法的使用?
      在最后一个浮动元素后面添加一个块级标签,设置清除浮动样式->clear:both
      实际工作中可能会遇到,但是不常用
     */

    .box {
      width: 500px;
      background-color: pink;
      border: 1px solid red;
      margin: 0 auto;
    }
    
    .damao {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }

    .ermao {
      float: left;
      width: 300px;
      height: 200px;
      background-color: purple;
    }

    .clear {
      clear: both;
    }
    
    .footer {
      height: 200px;
      background-color: #333;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="damao"></div>
    <div class="ermao"></div>
    <div class="clear"></div>
    <!-- 额外标签法只对块级元素或块级行内元素有效, 行内元素无效 -->
    <!-- <span class="clear"></span> -->
  </div>

  <div class="footer"></div>
</body>
</html>